<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin:0; padding:0; list-style:none;}

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul {position:absolute;left: 0;top: 0;}
#div1 ul li{height:500px;float: left;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#div1 .goPrev{left: 0;}
#div1 .goNext{right: 0;}
img{width:850px; height:500px;}
</style>
</head>
<script src="./jquery/jquery-3.5.1.min.js"></script>
<body>
<div id="div1">
	<ul>
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
    <li><img src="img/5.jpg" /></li>
  </ul>
  <ol>
  </ol>
  <a href="javascript:;" class="goPrev">&laquo;</a>
  <a href="javascript:;" class="goNext">&raquo;</a>
</div>
    <script>
        class carousel{
            constructor(){
                this.$div1 = $('#div1')
                this.$ul = $('#div1 ul')
                this.$imgs = $('#div1 ul li')
                this.$ol = $('#div1 ol')
                this.$goPrev = $('#div1 .goPrev')
                this.$goNext = $('#div1 .goNext')

                this.len = this.$imgs.length
                this.width = this.$imgs.outerWidth()
                this.index = 0
                this.lastindex = 0

                this.timer = null

                this.init()
                this.btnclick()
                this.nextclick()
                this.lastclick()
                this.auto()
            }
            init(){  
                this.$ul.width((this.len+1)*this.width)
                for(var i=0;i<this.len;i++){
                    $('<li>').html(i+1).addClass(i===0?'ac':'').appendTo(this.$ol)
                }
            }
            btnclick(){
                const that = this
                this.$btns = this.$ol.children()
                this.$btns.on('click',function(){
                    that.lastindex = that.index
                    that.index = $(this).index()
                    console.log(that.index)
                    that.$btns.eq(that.lastindex).removeClass('ac')
                    that.$btns.eq(that.index).addClass('ac')
                    that.$ul.animate({left:-that.index*that.width})
                })
            
            }
            nextclick(){
                this.$goNext.on('click',()=>{
                    this.lastindex = this.index
                    this.index++
                    if(this.len === this.index ){
                        this.index = 0
                        this.$ul.animate({left:-this.width*this.index},()=>{
                            this.$ul.css('left',0)
                        })
                    }else(
                        this.$ul.animate({left:-this.index*this.width})
                    )
                    this.$btns.eq(this.lastindex).removeClass('ac')
                    this.$btns.eq(this.index).addClass('ac')
                })    
            }
            lastclick(){
                this.$goPrev.on('click',()=>{
                    this.lastindex = this.index
                    this.index--
                    if(this.index<0){
                        this.index = this.len-1
                        this.$ul.animate({left:-this.index*this.width},()=>{
                            this.$ul.css('left',-this.index*this.width)
                        })
                    }
                    else{
                        this.$ul.animate({left:-this.index*this.width})
                        console.log(this.index)
                    }
                    this.$btns.eq(this.lastindex).removeClass('ac')
                    this.$btns.eq(this.index).addClass('ac')
                })
            }
            auto(){
                this.play()
                this.$div1.hover(()=>{
                    clearInterval(this.timer)
                },()=>{
                    this.play()
                })
            }
           play(){
               this.timer = setInterval(() => {
                   this.$goNext.trigger('click')
               }, 2000);
           }
            
        }
        new carousel()
    </script>
</body>
</html>